<template>
  <div class="registration-container">
    <div class="left">
      <modules-title title-name="门诊挂号"></modules-title>
      <!--      <span @click="print('print')">打印病历</span>-->
      <div class="content">
        <div class="content-single">
          <ul class="list-content">
            <li
              v-for="(item, index) in list"
              :key="index"
              @click="listHandler(item.doctor_id)"
              :class="['list-item',itemId==item.doctor_id?'item-active':'']"
            >
              <div class="sex-name">
                <sex-icon :sex="item.gender"></sex-icon>
                <p class="content text-line-1">{{ item.doctor_name }}</p>
                <p class="content text-line-1">{{item.department_name}}</p>
              </div>
              <div class="list-num">
                <p class="content">待诊{{ item.waiting_diagnosis }}</p>
              </div>
              <div class="list-num">
                <p class="content">已诊{{ item.complete_diagnosis }}</p>
              </div>
              <div class="status">
                <el-button class="border-btn"
                           @click="registrationElDialog(item.doctor_id,item.department_id,item.department_name,item.gender,item.doctor_name)">
                  挂号
                </el-button>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="right" id="right">
      <modules-title title-name="挂号记录"></modules-title>
      <div class="content-all">
        <div class="content">
          <div class="select">
            <el-radio-group v-model="selectType" size="medium" fill="rgba(62, 144, 158, 0.1)" text-color="#3E909E"
                            @change="selectTypeData()">
              <el-radio-button label="全部">全部({{this.totals}})</el-radio-button>
              <el-radio-button label="待诊">待诊({{this.waitcount}})</el-radio-button>
              <el-radio-button label="已诊">已诊({{this.compcount}})</el-radio-button>
            </el-radio-group>
          </div>
          <div class="search">
            <el-input
              size="small"
              placeholder="搜索姓名、手机"
              v-model="search"
              :clearable="true"
              @change="searchChange()"
              prefix-icon="el-icon-search">
            </el-input>
          </div>
          <el-button class="main-btn" size="small" @click="searchData" type="primary"
                     style="margin-top: 19px;margin-left: 10px">搜索
          </el-button>
          <el-button class="border-btn" size="small" @click="resetData" style="margin-top: 19px;margin-left: 10px">重置
          </el-button>
        </div>
        <div class="table">
          <el-table
            :data="tableData"
            border
            :header-cell-style="{background:'#F5F5F5',color:'#000000',textAlign:'center'}"
          >
            <el-table-column
              prop="real_name"
              label="姓名"
              align="center">
            </el-table-column>
            <el-table-column
              prop="gender"
              align="center"
              label="性别">
              <template slot-scope="scope">
                <div v-if="scope.row.gender=='0'">男</div>
                <div v-if="scope.row.gender=='1'">女</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="age"
              align="center"
              label="年龄">
            </el-table-column>
            <el-table-column
              prop="mobile"
              align="center"
              label="手机号">
            </el-table-column>
            <el-table-column
              prop="department_name"
              align="center"
              label="科室">
            </el-table-column>
            <el-table-column
              prop="doctor_name"
              align="center"
              label="医生">
            </el-table-column>
            <el-table-column
              prop="no"
              align="center"
              label="候诊号">
            </el-table-column>
            <el-table-column
              prop="register_status"
              label="状态"
              align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.register_status==1"><i class="status"></i>待诊</div>
                <div v-if="scope.row.register_status==3"><i class="status-d"></i>已诊</div>
                <div v-if="scope.row.register_status==2"><i class="status"></i>接诊中</div>
                <div v-if="scope.row.register_status==4"><i class="status-d"></i>过号</div>
                <div v-if="scope.row.register_status==5"><i class="status-d"></i>过期</div>
                <div v-if="scope.row.register_status==6"><i class="status-d"></i>退号</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="date"
              align="center"
              label="挂号时间"
              min-width="180"
            >
              <template #default="{row}">
                {{ row.created_at | dateFormat}}
              </template>
            </el-table-column>
            <el-table-column
              prop="number"
              align="center"
              label="操作"
              width="180"
            >
              <template slot-scope="scope">
                <span @click="noNumber(scope.row.id)" style="cursor: pointer;color:#3F909E;margin-right: 10px"
                      v-if="scope.row.register_status==1">退号</span>
                <span style="cursor: pointer;color:#3F909E;" @click="print(scope.row)">打印</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      class="dialog"
      :visible.sync="isRegistrationElDialog"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :width="dialogWidth"
      title="挂号收费"
    >
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="ruleForm.name" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="科室" prop="section">
              <el-select
                style="width: 100%"
                v-model="ruleForm.section"
                filterable
                allow-create
                :clearable="true"
                default-first-option
                placeholder="请选择科室"
                @change="selectSection"
              >
                <el-option
                  v-for="item in selectOptions"
                  :key="item.id"
                  :disabled="item.boole"
                  :label="item.department_name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <div class="selectSex">
                <div class="sex">
                  <el-radio v-model="ruleForm.sex" label="0" border align="center" @change="sexChange()">男</el-radio>
                </div>
                <div class="sex">
                  <el-radio v-model="ruleForm.sex" label="1" border align="center" @change="sexChange()">女</el-radio>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="医生" prop="doctor">
              <el-select
                style="width: 100%"
                v-model="ruleForm.doctor"
                filterable
                allow-create
                :clearable="true"
                default-first-option
                placeholder="请选择医生"
                @change="selectDoctor()"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.real_name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="年龄" prop="age">
              <div class="age">
                <div class="ageS">
                  <el-form-item :prop="'age'+'.year'" :rules="rules.checkAge" ref="year">
                    <el-input v-model="ruleForm.age.year" @change="changeAge()">
                      <template slot="append">岁</template>
                    </el-input>
                  </el-form-item>
                </div>
                <div class="ageS">
                  <el-form-item :prop="'age'+'.month'" :rules="rules.checkMonth" ref="month">
                    <el-input v-model="ruleForm.age.month">
                      <template slot="append">月</template>
                    </el-input>
                  </el-form-item>
                </div>
                <div class="ageS">
                  <el-form-item :prop="'age'+'.day'" :rules="rules.checkDay" ref="day">
                    <el-input v-model="ruleForm.age.day">
                      <template slot="append">天</template>
                    </el-input>
                  </el-form-item>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="挂号类型" prop="sectionType">
              <el-select
                style="width: 100%"
                v-model="ruleForm.sectionType"
                @change="selectRegistrationType()"
                filterable
                allow-create
                :clearable="true"
                default-first-option
                placeholder="请选择挂号类型">
                <el-option
                  v-for="item in selectOptiont"
                  :key="item.ID"
                  :label="item.TypeName"
                  :value="item.ID">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="ruleForm.phone" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="挂号费" prop="fee">
              <el-input v-model="ruleForm.fee" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="紧急联系方式" prop="Jphone">
              <el-input v-model="ruleForm.Jphone" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="优惠" prop="discount">
              <el-input v-model="ruleForm.discount" @change="discountPrice" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" v-if="isShowMore">
            <el-form-item label="身份证号" prop="ID">
              <el-input v-model="ruleForm.ID" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="isShowMore">
            <el-form-item label="地址" prop="address">
              <el-input v-model="ruleForm.address" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="!isShowMore">
            <div @click="showMore()">
              <span style="margin-left: 100px;color:#3E909E;cursor: pointer">更多信息</span><i class="el-icon-arrow-down"
                                                                                           style="color:#3E909E "></i>
            </div>
          </el-col>
        </el-row>
        <el-row :span="12" v-if="isShowMore">
          <div @click="hideMore()">
            <span style="margin-left: 100px;color:#3E909E;cursor: pointer">收起</span><i class="el-icon-arrow-up"
                                                                                       style="color:#3E909E "></i>
          </div>
        </el-row>
        <!--        <el-row :span="12">-->
        <!--          <el-form-item label="医保" prop="insurance">-->
        <!--            <el-radio v-model="insurance" label="1" @click.native.prevent="isInsurance('1')">使用医保</el-radio>-->
        <!--          </el-form-item>-->
        <!--        </el-row>-->
        <!--        <el-row :span="24">-->
        <!--          <div class="insurance">-->
        <!--            <el-form-item label="医保支付" prop="insurance" class="insuranceI">-->
        <!--              <el-input v-model="ruleForm.insurance" label="1" class="input"></el-input>-->
        <!--            </el-form-item>-->
        <!--          </div>-->
        <!--        </el-row>-->
        <el-row :span="24">
          <el-form-item label="付款方式" prop="method">
            <el-radio-group v-model="ruleForm.type" @change="changeType()">
              <el-radio :label="1">现金</el-radio>
              <el-radio :label="2">移动支付(支付宝/微信)</el-radio>
              <!--              <el-radio :label="3">微信</el-radio>-->
              <!--              <el-radio :label="4">银行卡</el-radio>-->
              <!--              <el-radio :label="5">医保卡</el-radio>-->
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row :span="24" v-if="ruleForm.type==1">
          <el-col :span="12">
            <el-form-item label="付款金额" prop="Money">
              <el-input v-model="ruleForm.Money" @change="changeMoney" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="找零">
              <span>￥{{otherPrice | moneyFormat}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :span="24" v-if="ruleForm.type==2">
          <el-form-item>
            <div class="info" v-if="info">
              <img src="../../assets/img/payOrDrug/waitCode_icon.png">
              <div>待支付扫码</div>
            </div>
            <div class="info-s" v-if="!info">
              <img src="../../assets/img/payOrDrug/cmpCode_icon.png">
              <div>支付完成</div>
            </div>
          </el-form-item>
        </el-row>
      </el-form>
      <el-row>
        <div class="footer">
          <div class="footer-q">实收金额：<span style="font-size: 20px">￥{{amount | moneyFormat}}</span></div>
          <!--          <div style="margin-top: 8px;color:red" v-if="isScanDialog">{{info}}</div>-->
          <div>
            <el-checkbox v-model="checked" style="margin-top: 4px;margin-left:10px">打印小票</el-checkbox>
            <el-button class="border-btn" style="margin-left: 60px" @click="closeDialog()">取消</el-button>
            <el-button class="main-btn" type="primary" size="small" @click="submitForm('ruleForm')">确定</el-button>
          </div>
        </div>
      </el-row>
    </el-dialog>
    <!--    <el-dialog :visible.sync="isScanDialog" style="width:40%;height:300px" :close-on-click-modal="false">-->
    <!--      <span>请扫码</span>-->
    <!--&lt;!&ndash;      <el-input v-model="ruleForm.authorization_code" ref="scan"></el-input>&ndash;&gt;-->
    <!--    </el-dialog>-->
    <div id="print">
      <invoice :createData="createData"></invoice>
    </div>
  </div>
</template>
<script>
  import modulesTitle from "@/components/modulesTitle.vue";
  import sexIcon from "@/components/sexIcon.vue";
  import scanCode from '@/utils/scan'
  import {
    getDoctorList,
    getRegistrationList,
    getRegistrationSubmit,
    getDepartment,
    getDoctorment,
    getRegistrationType,
    getRegistrationInfo,
    noNum
  } from "@/api/registration";
  import Templates from "../clinicManagement/index";
  import Invoice from "../print/invoice";

  export default {
    components: {Invoice, Templates, modulesTitle, sexIcon},
    data() {
      //月份校验
      var checkMonth = (rule, value, callback) => {
        // if (value === "") {
        //   callback(new Error("请输入正确月份"));
        // } else {
        //   let regEn = /^([1][0,1,2]|[0-9])$/
        //   if (!regEn.test(value)) {
        //     callback(new Error('请输入正确月份'))
        //   }else{
        //     callback();
        //   }
        // }
      }
      //天数校验
      var checkDay = (rule, value, callback) => {
        // if (value === "") {
        //   callback(new Error("请输入正确天数"));
        // } else {
        //   let regEn = /^([0-9]|[1-2][0-9]|3[0,1])$/
        //   if (!regEn.test(value)) {
        //     callback(new Error('请输入正确天数'))
        //   }else{
        //     callback();
        //   }
        // }
      }
      //验证优惠金额
      var checkDiscount = (rule, value, callback) => {
        let regEn = /^([0-9]\d*(\.\d{1,2})?|([0](\.([0][1-9]|[1-9]\d{0,1}))))$/
        if (value == '') {
          callback()
        } else if (!regEn.test(value)) {
          callback(new Error('请输入正确费用金额，可包含两位小数'))
        } else {
          if (Number(value) > Number(this.ruleForm.fee)) {
            callback(new Error('优惠金额应小于挂号费'))
          } else {
            callback()
          }
        }
      }
      //验证实付金额
      var checkMoney = (rule, value, callback) => {
        let regEn = /^([0-9]\d*(\.\d{1,2})?|([0](\.([0][1-9]|[1-9]\d{0,1}))))$/
        if (value == '') {
          callback(new Error('请输入付款金额'))
        } else if (!regEn.test(value)) {
          callback(new Error('请输入正确费用金额，可包含两位小数'))
        } else {
          if (Number(value) < Number(this.amount)) {
            callback(new Error('金额不足，无法支付'))
          } else {
            callback()
          }
        }
      }
      return {
        otherPrice: 0,
        info: true,
        scanMoney: '',
        createData: {},
        isScanDialog: false,
        checked: false,
        isPrint: false,
        dialogWidth: 0,
        itemId: 0,
        currentPage: 1,
        list: [
          {
            complete_diagnosis: 0,
            department_id: 0,
            department_name: "",
            doctor_id: 0,
            doctor_name: "全部医生",
            gender: 0,
            waiting_diagnosis: 0,
          },
        ],
        selectType: '全部',
        amount: 0.00,
        seachData: {
          real_name: '',
          mobile: '',
          register_status: 0,
          pager: {
            size: 10,
            number: 1
          },
          doctor_id: 0,
        },
        tableData: [],
        isRegistrationElDialog: false,
        ruleForm: {
          name: '',
          section: null,
          sex: '',
          doctor: null,
          age:
            {
              year: 0,
              month: 0,
              day: 0,
            },
          fee: '',
          phone: '',
          Jphone: '',
          discount: '',
          ID: '',
          sectionType: '',
          address: '',
          insurance: '',
          type: 1,
          authorization_code: '',
          Money: '',
        },
        rules: {
          name: [
            {required: true, message: '请填写姓名', trigger: 'blur'},
          ],
          section: [
            {required: false, message: '请选择科室', trigger: 'change'}
          ],
          sectionType: [
            {required: true, message: '请选择挂号类型', trigger: 'change'}
          ],
          sex: [
            {required: true, message: '请选择性别', trigger: 'change'}
          ],
          checkAge: [
            {required: true, trigger: 'blur', message: '请输入正确岁数', pattern: /(^[0-9]\d*$)/},
          ],
          checkMonth: [
            {required: true, trigger: 'blur', message: '请输入正确月数', pattern: /^([1][0,1]|[0-9])$/},
          ],
          checkDay: [
            {required: true, trigger: 'blur', message: '请输入正确天数', pattern: /^([0-9]|[1-2][0-9]|3[0])$/},
          ],
          age: [
            {required: true, message: '请填写年龄', trigger: 'blur'}
          ],
          doctor: [
            {required: true, message: '请选择医生', trigger: 'change'}
          ],
          fee: [
            {required: false, trigger: 'blur'},
            {pattern: /^([0-9]\d*(\.\d{1,2})?|([0](\.([0][1-9]|[1-9]\d{0,1}))))$/, message: '请输入正确费用金额，可包含两位小数'}
          ],
          discount: [
            {required: false, trigger: 'blur', validator: checkDiscount},
            // {pattern: /^([0-9]\d*(\.\d{1,2})?|([0](\.([0][1-9]|[1-9]\d{0,1}))))$/, message: '请输入正确费用金额，可包含两位小数，且小于等于挂号费'}
          ],
          Money: [
            {required: true, trigger: 'blur', validator: checkMoney},
          ],
          phone: [
            {required: false, trigger: 'blur'},
            {pattern: /^1(3|4|5|6|7|8|9)\d{9}$/, message: '请输入正确的手机号'}
          ],
          Jphone: [
            {required: false, trigger: 'blur'},
            {pattern: /^1(3|4|5|6|7|8|9)\d{9}$/, message: '请输入正确的手机号'}
          ],
          ID: [
            {required: false, message: '请输入正确身份证号', trigger: 'blur'},
            {
              pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)/,
              message: '请输入正确的身份证号'
            }
          ]
        },
        options: [],
        selectOptions: [],
        selectOptiont: [],
        yearOptions: [],
        isShowMore: false,
        search: '',
        insurance: '',
        is: false,
        department_id: '',
        department_name: '',
        doctor_id: '',
        doctor_name: '',
        total: 0,
        totals: 0,
        waitcount: '',
        compcount: '',
        TypeName: ''
      };
    },
    created() {
      //监听弹窗宽度变化
      this.setDialogWidth()
      //获取医生列表
      this.getDoctorList()
      //获取挂号记录列表
      this.getRegistrationList(this.seachData)
      console.log(this.$store.getters.scanString)
    },
    mounted() {
      console.log(this.$store.getters.scanString)
      //监听弹窗变化
      window.onresize = () => {
        return (() => {
          this.setDialogWidth()
        })()
      }
    },
    methods: {
      //退号
      noNumber(id) {
        console.log(id)
        this.$confirm('确认退号?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          noNum(id).then(res => {
            if (res.code == 200) {
              this.getRegistrationList(this.seachData)
            }
          })
        }).catch(() => {

        });
        // noNum(id).then(res=>{
        //   if(res.code==200){
        //     this.getRegistrationList(this.seachData)
        //   }
        // })
      },
      //付款金额
      changeMoney() {
        this.otherPrice = Number(this.ruleForm.Money) - Number(this.amount)
      },
      print(data) {
        getRegistrationInfo(data.id).then(res => {
          if (res.code == 200) {
            console.log(res.data)
            let datas = {
              name: res.data.real_name,
              department_name: res.data.department_name,
              gender: res.data.gender,
              doctor_name: res.data.doctor_name,
              age: res.data.age,
              receivable_amount: res.data.receivable_amount,
              mobile: res.data.mobile,
              type_name: res.data.type_name,
              discount_amount: Number(res.data.discount_amount),
              final_amount: res.data.final_amount,
              created_at: res.data.created_at
            }
            this.createData = {
              createData: datas
            }
            this.$nextTick(() => {
              window.print();
            })
          }
        })
      },
      //监听年
      changeAge() {

      },
      //筛选数据
      selectTypeData() {
        console.log(this.selectType)
        if (this.selectType == '全部') {
          this.seachData.register_status = 0
          this.seachData.pager.number = 1
          this.getRegistrationList(this.seachData)
        } else if (this.selectType == '待诊') {
          this.seachData.register_status = 1
          this.seachData.pager.number = 1
          this.getRegistrationList(this.seachData)
        } else {
          this.seachData.register_status = 3
          this.seachData.pager.number = 1
          this.getRegistrationList(this.seachData)
        }
        this.$forceUpdate()
      },
      //搜索
      searchChange() {
        this.seachData.pager.number = 1
        this.seachData.pager.size = 10
        this.seachData.real_name = this.search
        this.getRegistrationList(this.seachData)
      },
      searchData() {
        this.searchChange()
      },
      //重置
      resetData() {
        this.search = ''
        this.seachData.real_name = this.search
        this.getRegistrationList(this.seachData)
      },
      //选择收费方式
      changeType() {
        if (this.ruleForm.type == 2) {
          this.info = true;
          scanCode.scanCode((data) => {
            this.ruleForm.authorization_code = data.pay_code
            this.ruleForm.type = Number(data.pay_type)
            if (this.ruleForm.authorization_code != '') {
              this.info = false;
              this.submitForm('ruleForm')
            } else {
              this.$message.error('支付失败')
            }
          })
        } else {
          this.ruleForm.authorization_code = ''
          scanCode.removeFun();
        }
      },
      //获取医生列表
      getDoctorList() {
        getDoctorList().then(res => {
          this.list = [
            {
              complete_diagnosis: 0,
              department_id: 0,
              department_name: "",
              doctor_id: 0,
              doctor_name: "全部医生",
              gender: 0,
              waiting_diagnosis: 0,
            },
          ]
          console.log(this.list[0])
          this.list[0].waiting_diagnosis = res.data.z_wating
          this.list[0].complete_diagnosis = res.data.z_complete
          res.data.DoctorInfo.forEach(item => {
            if (item.gender == '' || item.gender == '男') {
              Object.assign(item, {gender: 0})
            } else {
              Object.assign(item, {gender: 1})
            }
            this.list.push(item)
          })
          console.log()
        })
      },
      //获取挂号记录列表
      getRegistrationList(data) {
        getRegistrationList(data).then(res => {
          console.log(res.data)
          this.tableData = res.data.Register
          this.tableData.forEach(item => {
            let arr = []
            if (item.age != '') {
              arr = item.age.toString().split(',')
              let a = '', a1 = '', a2 = '', a3 = ''
              if (arr[0] == '0') {
                a1 = ''
              } else {
                a1 = arr[0] + '岁'
              }
              if (arr[1] == '0') {
                a2 = ''
              } else {
                a2 = arr[1] + '月'
              }
              if (arr[2] == '0') {
                a3 = ''
              } else {
                a3 = arr[2] + '天'
              }
              a = a1 + a2 + a3
              Object.assign(item, {age: a});
            }
          })
          this.total = res.data.zcount
          this.totals = res.data.whole
          this.waitcount = res.data.waitcount
          this.compcount = res.data.compcount
        })
      },
      //弹窗宽度变化
      setDialogWidth() {
        var val = document.body.clientWidth
        const def = 900 // 默认宽度
        if (val < def) {
          this.dialogWidth = '100%'
        } else {
          this.dialogWidth = def + 'px'
        }
      },
      //关闭弹窗，重置表单
      handleClose() {
        this.isRegistrationElDialog = false
        this.ruleForm = {
          name: '',
          section: null,
          sex: '',
          doctor: null,
          age:
            {
              year: 0,
              month: 0,
              day: 0,
            },
          fee: '',
          phone: '',
          Jphone: '',
          discount: '',
          ID: '',
          sectionType: '',
          address: '',
          insurance: '',
          type: 1,
          authorization_code: '',
          Money: '',
        }
        this.otherPrice = 0
        // this.ruleForm.discount = ''
        // this.ruleForm.Money = ''
        this.$refs.ruleForm.resetFields()
        this.$refs.ruleForm.clearValidate()
      },
      //选中
      listHandler(item_id) {
        this.itemId = item_id;
        console.log(this.itemId)
        this.seachData.pager.number = 1
        this.seachData.doctor_id = this.itemId
        this.getRegistrationList(this.seachData)
      },
      //挂号弹窗
      registrationElDialog(doctor_id, department_id, department_name, gender, doctor_name) {
        this.$forceUpdate()
        getDoctorment(this.department_id).then(res => {
          if (res.code == 200) {
            this.options = res.data
            getRegistrationType().then(res => {
              console.log(res.data)
              this.selectOptiont = res.data
              if (this.options.length == 0 ) {
                this.$message.error('请在“系统-人员管理”下增加医生')
              }else if(this.selectOptiont.length == 0){
                this.$message.error('请在“系统-挂号费设置”下设置挂号费')
              } else if(this.options.length == 0&&this.selectOptiont.length == 0){
                this.$message.error('请在“系统-人员管理”下增加医生，并在“系统-挂号费设置”下设置挂号费')
              }else {
                this.isRegistrationElDialog = true
                //获取挂号类型
                getRegistrationType().then(res => {
                  console.log(res.data)
                  this.selectOptiont = res.data
                  if (this.selectOptiont.length == 0) {
                    // this.$message.error('请先设置挂号类型')
                    return
                  } else {
                    //默认挂号类型
                    this.ruleForm.sectionType = this.selectOptiont[0].ID
                    this.ruleForm.fee = this.selectOptiont[0].SellingPrice
                    this.amount = Number(this.ruleForm.fee)
                    // this.ruleForm.Money = this.amount
                    this.selectOptiont.forEach(item => {
                      if (this.ruleForm.sectionType == item.ID) {
                        this.TypeName = item.TypeName
                      }
                    })
                  }
                })
                if (doctor_id == 0) {
                  //获取科室
                  let data = {
                    pager: {},
                    key_word: ''
                  }
                  getDepartment(data).then(res => {
                    console.log(res)
                    this.selectOptions = res.data.data
                    this.selectOptions.forEach(item => {
                      if (item.real_name === '') {
                        item.boole = true
                      } else {
                        item.boole = false
                      }
                    })
                  })
                  //获取医生
                  getDoctorment().then(res => {
                    if (res.code == 200) {
                      this.options = res.data
                      // for (let i = 0; i < this.options.length; i++) {
                      //   this.ruleForm.doctor = this.options[0].id
                      //   this.doctor_name = this.options[0].real_name
                      // }
                    }
                  })
                  this.ruleForm.section = ''
                  // this.ruleForm.doctor = '不限制'
                  this.ruleForm.sex = '0'
                } else {
                  this.ruleForm.sex = '0'
                  //获取科室
                  let data = {
                    pager: {},
                    key_word: ''
                  }
                  getDepartment(data).then(res => {
                    console.log(res)
                    this.selectOptions = res.data.data
                    this.selectOptions.forEach(item => {
                      if (item.real_name === '') {
                        item.boole = true
                      } else {
                        item.boole = false
                      }
                    })
                    if (department_id == 0) {
                      this.ruleForm.section = null
                    } else {
                      this.ruleForm.section = department_id
                    }
                    this.department_name = department_name
                    this.ruleForm.doctor = doctor_id
                    this.doctor_name = doctor_name
                    console.log(this.ruleForm.section, this.ruleForm.doctor)
                    getDoctorment(this.ruleForm.section).then(res => {
                      if (res.code == 200) {
                        this.options = res.data
                      }
                    })
                   })
                  }
              }
            })
          }
        })
      },
      //选择科室
      selectSection(val) {
        this.department_id = this.ruleForm.section
        for (let i = 0; i < this.selectOptions.length; i++) {
          if (this.department_id == this.selectOptions[i].id) {
            this.department_name = this.selectOptions[i].department_name
          }
        }
        this.ruleForm.doctor = null
        getDoctorment(this.department_id).then(res => {
          if (res.code == 200) {
            this.options = res.data
            console.log(this.options)
          }
        })
      },
      //选择挂号类型
      selectRegistrationType() {
        this.selectOptiont.forEach(item => {
          if (this.ruleForm.sectionType == item.ID) {
            this.ruleForm.fee = item.SellingPrice
            this.TypeName = item.TypeName
          }
        })
        this.amount = Number(this.ruleForm.fee) - Number(this.ruleForm.discount)
        this.otherPrice = 0
        this.ruleForm.Money = ''
        // this.otherPrice = Number(this.ruleForm.Money) - Number(this.amount)
        // this.ruleForm.Money = this.amount
      },
      //选择医生
      selectDoctor() {
        this.doctor_id = this.ruleForm.doctor
        for (let i = 0; i < this.options.length; i++) {
          if (this.doctor_id == this.options[i].id) {
            this.doctor_name = this.options[i].real_name
          }
        }
      },
      //优惠金额
      discountPrice() {
        this.amount = Number(this.ruleForm.fee) - Number(this.ruleForm.discount)
        this.otherPrice = 0
        this.ruleForm.Money = ''
        // this.otherPrice = Number(this.ruleForm.Money) - Number(this.amount)
        // this.ruleForm.Money = this.amount
      },
      //显示更多信息
      showMore() {
        this.isShowMore = true
        console.log(111)
      },
      //收起更多
      hideMore() {
        this.isShowMore = false
      },
      //性别选择
      sexChange() {
        console.log(this.ruleForm.sex)
      },
      //是否使用医保
      isInsurance(e) {
        if (this.insurance === e) {
          this.insurance = ''
          return
        }
        this.insurance = e
      },
      //关闭挂号弹窗
      closeDialog() {
        this.isRegistrationElDialog = false
        this.ruleForm = {
          name: '',
          section: null,
          sex: '',
          doctor: null,
          age:
            {
              year: 0,
              month: 0,
              day: 0,
            },
          fee: '',
          phone: '',
          Jphone: '',
          discount: '',
          ID: '',
          sectionType: '',
          address: '',
          insurance: '',
          type: 1,
          authorization_code: '',
          Money: '',
        }
        this.otherPrice = 0
        this.$refs.ruleForm.resetFields()
        this.$refs.ruleForm.clearValidate()
        let selt = this
        selt.$nextTick(_=>{
          selt.$set(selt.options,[])
        })
        // // this.ruleForm.name=''
        // // this.ruleForm.age.year=0
        // // this.ruleForm.age.month=0
        // // this.ruleForm.age.day=0
        // // this.ruleForm.discount = ''
        // // this.ruleForm.Money = ''
      },
      //监听条数变化
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        Object.assign(this.seachData.pager, {size: val})
        this.getRegistrationList(this.seachData)
      },
      //监听页码变化
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        Object.assign(this.seachData.pager, {number: val})
        this.getRegistrationList(this.seachData)
      },
      //提交表单
      submitForm(formName) {
        if (this.ruleForm.age.year == '') {
          this.$refs.year.clearValidate();
          this.ruleForm.age.year = 0
        }
        if (this.ruleForm.age.month == '') {
          this.$refs.month.clearValidate();
          this.ruleForm.age.month = 0
        }
        if (this.ruleForm.age.day == '') {
          this.$refs.day.clearValidate();
          this.ruleForm.age.day = 0
        }
        if (this.ruleForm.age.year == 0 && this.ruleForm.age.month == 0 && this.ruleForm.age.day == 0) {
          this.ruleForm.age.year = ''
        }
        console.log(this.ruleForm.authorization_code)
        if (Number(this.ruleForm.section) == 0) {
          this.department_name = ''
        }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let age = this.ruleForm.age.year + ',' + this.ruleForm.age.month + ',' + this.ruleForm.age.day
            this.amount = Number(this.amount.toFixed(2))
            console.log(this.amount)
            let data = {
              name: this.ruleForm.name,
              department_name: this.department_name,
              gender: this.ruleForm.sex,
              doctor_name: this.doctor_name,
              age: age,
              receivable_amount: this.ruleForm.fee,
              mobile: this.ruleForm.phone,
              type_name: this.TypeName,
              discount_amount: Number(this.ruleForm.discount),
              id_card: this.ruleForm.ID,
              address: this.ruleForm.address,
              contact: this.ruleForm.Jphone,
              pay_type: this.ruleForm.type,
              authorization_code: this.ruleForm.authorization_code,
              // insurance:'',
              // type:'',
              department_id: Number(this.ruleForm.section),
              doctor_id: Number(this.ruleForm.doctor),
              final_amount: this.amount,
            }
            getRegistrationSubmit(data).then(res => {
              if (res.code == 200) {
                if(this.checked == false){
                  this.$message.success('挂号成功')
                }
                this.isRegistrationElDialog = false
                this.otherPrice = 0
                this.$refs.ruleForm.resetFields()
                getDoctorList().then(res => {
                  console.log(this.list[0])
                  this.list[0].waiting_diagnosis = res.data.z_wating
                  this.list[0].complete_diagnosis = res.data.z_complete
                  res.data.DoctorInfo.forEach(item => {
                    if (item.gender == '') {
                      Object.assign(item, {gender: 0})
                    }
                  })
                })
                this.getDoctorList()
                this.getRegistrationList(this.seachData)
                if (this.checked == true) {
                  this.createData = {
                    createData: data
                  }
                  this.$nextTick(() => {
                    this.isRegistrationElDialog = false
                    window.print();
                  })
                }
              }
            })
          } else {
            return false;
          }
        });
      },
    }
  };
</script>
<style lang="scss" scoped>
  @import "@/assets/scss/registration/registration.scss";
  @import "@/assets/scss/print/invoice.scss";
</style>
<style>
  .el-dialog__header {
    border-bottom: 1px solid #E6E6E6;
  }

  .el-input-group__append {
    width: 26px;
    text-align: center;
    padding: 0px 0px
  }

  .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
    box-shadow: none;
  }

  #print {
    display: none;
  }
</style>
